<template>
    <div>
        <div ref="top">
            <van-row>
                <van-col span="8"></van-col>
                <van-col style="color: #a00" span="8">A股</van-col>
                <van-col span="8"></van-col>
            </van-row>
            <da-pan></da-pan>
            <van-row>
                <van-col span="8">名称</van-col>
                <van-col span="8">最新</van-col>
                <van-col span="8">涨幅</van-col>
            </van-row>
        </div>
        <div class="body" :style="bodyHeight" >

            <van-row v-for="index in 1000">
                <van-col span="8"></van-col>
                <van-col span="8">最新</van-col>
                <van-col span="8">涨幅</van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
    import DaPan from "../../../components/daPanZsCom";
    export default {
        name: "index",
        components: {DaPan},
        data() {
            return {
                bodyHeight: "",
            }
        },
        methods: {
            initBodyHeight() {
                const topHeight = this.$refs.top.clientHeight;
                console.log(topHeight);
                const winHeight = window.innerHeight;
                console.log(winHeight);
                this.bodyHeight =  'height:' + (winHeight - 50 - topHeight) + 'px';
            }
        },
        mounted() {
            this.initBodyHeight();
        }
    }
</script>

<style scoped>

    .van-col {
        text-align: center;
    }

    .body {
        margin-bottom: 50px;
        overflow: auto;
    }

</style>